<template>
    <div class="buy-suc">
        <header-bar :text="title" :left="left"></header-bar>
        <div class="buy-content">
            <div class="img-con">
                <img src="../assets/buy-suc.png" alt="" class="img">

            </div>
            <p style="font-size:16px;font-family:PingFangSC-Regular;color:rgba(53,53,53,1);margin-bottom:24px;text-align:center;">{{params.name}}</p>
            <div style="padding-left:29px;">
                <div class="time-line">
                    <div class="line-con">
                        <div class="line-con-l">
                            <img src="../assets/time.png" class="line-cri" alt="">
                            <div class="line-line" ></div>
                            <span class="cri"></span>
                        </div>
                        <div class="line-con-r">
                            <p class="line-title-span">预计{{tomorrow}} 前开始确认份额</p>
                            <p class="line-title-des">预计{{tomorrow}}  开始计算收益</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sub-btn" @click="handSub">完成</div>
    </div>
</template>

<script>
import headerBar from "./main/header";
export default {
  data() {
    return {
      title: "买入结果",
      params:{},
      left: {
        status: true,
      },
      tomorrow:""
    };
  },
  methods: {
    handSub() {
      // this.$router.back();
      window.history.go(-2);
    }
  },
  mounted() {
    this.params = this.$route.query;
    var day3 = new Date();
    day3.setTime(day3.getTime()+24*60*60*1000);
    this.tomorrow = day3.getFullYear()+"-" + (day3.getMonth()+1) + "-" + day3.getDate();
  },
  components: {
    headerBar
  }
};
</script>

<style scoped>
.img {
  width: 79px;
  height: 79px;
  margin: 35px auto 19px auto;
}
.img-con {
  width: 100%;
  text-align: center;
}
.buy-suc {
  padding-top: 50px;
}
.buy-content {
  height: 311px;
  background: #fff;
}
.sub-btn {
  width: 331px;
  height: 44px;
  background: rgba(247, 169, 92, 1);
  border-radius: 4px;
  text-align: center;
  color: #fff;
  line-height: 44px;
  margin: 34px auto;
}
.personnelinfo {
  padding: 0 32px;
}
.time-line {
  display: flex;
  flex-flow: column;
}
.line-con {
  width: 100%;
  height: 100px;
  display: flex;
  flex-flow: row;
}
.cri {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(247, 169, 92, 1);
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 2px;
  z-index: 2;
}
.line-con-l {
  position: relative;
  width: 20px;
  margin-right: 16px;
}
.line-cri {
  width: 12px;
  height: 12px;
  z-index: 13;
  position: absolute;
  left: 0;
}
.line-con-r {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.line-line {
  width: 2px;
  background: rgba(238, 240, 241, 1);
  height: 82px;
  position: absolute;
  left: 27%;
  top: 12px;
  z-index: 1;
}
.line-title-span {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(102, 102, 102, 1);
  margin-bottom: 13px;
  color: #666666;
}
.line-title-des {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: #666666;
}
</style>
